<!-- 订单详情 -->
<template>
	<div>
		<Drawer v-model="detailShow" :title="$t('user.order_detail_title')" width="800px" @on-close="close"
			class-name="detail-drawer-show">
			<img class="order-step" src="@/assets/images/pay/order-step.png" alt="" mode="aspectFill" />
			<div class="order-msg">
				<div class="order-img">
					<product-picture v-if="detailData.mainImg" :image-list="[detailData.mainImg]"></product-picture>
					<img v-else class="img-imgs" src="@/assets/images/public/default-image.png" alt="" />
				</div>
				<div class="order-right">
					<div class="title-status">
						<div class="title-text">{{ detailData.subject || '' }}</div>
						<order-status :status="detailData.orderStatus" :statusName="detailData.orderStatusName"
							:subStatus="detailData.internalStatus"></order-status>
					</div>
					<div class="order-spe" v-if="detailData.skuAttrEnumFormatList && detailData.skuAttrEnumFormatList.length">
						<span v-for="(item, index) in detailData.skuAttrEnumFormatList" :key="index" style="margin-right: 4px;">{{
							item.name }}：{{ item.value }}</span>
					</div>
					<Row class="channel-time">
						<Col span="10">{{ $t("user.detail_purchase_terrace") }}：{{ detailData.channel || '' }}</Col>
						<Col span="14">{{ $t("user.detail_order_create_time") }} ：{{ orderData.order && orderData.order.createTime ?
							orderData.order.createTime : '' }}
						</Col>
					</Row>
				</div>
			</div>
			<Tabs class="order-tabs" v-model="tabsVal">
				<TabPane :label="$t('user.basic_inform')" name="base"></TabPane>
				<TabPane :label="$t('user.Value_added_services')" name="serve"></TabPane>
				<!-- <TabPane label="订单时间记录" name="time"></TabPane> -->
			</Tabs>
			<div v-if="tabsVal == 'base'" class="order-base">
				<!-- 取消原因 -->
				<div v-if="orderData.order && orderData.order.cancelReason" class="cause-test">{{ orderData.order &&
					orderData.order.cancelReason ?
					orderData.order.cancelReason : '' }}</div>
				<div class="base-title">
					<div class="base-line"></div>
					<div class="title-name">{{ $t('user.costDetails') }}</div>
				</div>
				<Row>
					<Col :span="8" class="f16">
					<span class="col-666">{{ $t('user.detail_price') }}：</span>
					<span class="col-333">{{ userCurrency.code }} {{ detailData.price || 0 }}</span>
					</Col>
					<Col :span="8" class="f16">
					<span class="col-666">{{ $t('pay.quantity') }}：</span>
					<span class="col-333">{{ detailData.quantity || 0 }}</span>
					</Col>
					<Col :span="8" class="f16">
					<span class="col-666">{{ $t('custom.custom_fee_text') }}：</span>
					<span class="col-333">{{ userCurrency.code }} {{ detailData.additionalServiceFee || 0 }}</span>
					</Col>
				</Row>
				<Row class="mt-14">
					<Col :span="8" class="f16">
					<span class="col-666">{{ $t('user.freight') }} ：</span>
					<span class="col-333">{{ userCurrency.code }} {{ detailData.expressFee || 0 }}</span>
					</Col>
					<Col :span="8" class="f16">
					<span class="col-666">{{ $t('user.grossCommodityPrice') }} ：</span>
					<span class="col-333">
						{{ userCurrency.code }} {{ goodsPrice(detailData.price, detailData.quantity,
							detailData.expressFee, detailData.couponDiscountAmount) }}
					</span>
					</Col>
					<Col :span="8" class="f16" v-if="hasValidCouponDiscount">
					<span class="col-666">{{ $t('wayBill.coupon_fee') }} ：</span>
					<span class="col-333 sep-text">-{{ userCurrency.code }} {{
						detailData.couponDiscountAmount }}</span>
					</Col>
				</Row>
				<div class="base-title" style="margin-top: 48px;">
					<div class="base-line"></div>
					<div class="title-name">{{ $t('user.order_info') }}</div>
				</div>
				<Row>
					<Col :span="8" class="f16">
					<span class="col-666">{{ $t('user.orderNumber') }} ：</span>
					<span class="col-333" id="span-copy">{{ orderData.order && orderData.order.orderNo ? orderData.order.orderNo :
						'' }}</span>
					<img v-if="orderData.order && orderData.order.orderNo" class="no-copy" src="@/assets/images/pay/copy-no.png"
						alt="" @click="copy(orderData.order.orderNo)" />
					</Col>
					<Col :span="8" class="f16">
					<span class="col-666">{{ $t('user.order_pay_time') }}：</span>
					<span class="col-333">{{ orderData.payOrder && orderData.payOrder.payTime ? orderData.payOrder.payTime : '-'
					}}</span>
					</Col>
					<Col :span="8" class="f16">
					<span class="col-666">{{ $t('user.orderNo_text') }} ：</span>
					<span class="col-333">{{ orderData.payOrder && orderData.payOrder.id ? orderData.payOrder.id : '-' }}</span>
					<img v-if="orderData.payOrder && orderData.payOrder.id" class="no-copy" src="@/assets/images/pay/copy-no.png"
						alt="" @click="copy(orderData.payOrder.id)" />
					</Col>
				</Row>
				<div class="f16 col-333 mt-32 lin-18">
					<span class="col-afa">{{ $t('transport.orderNote') }} ：</span>
					<span>{{ detailData.remarks || '' }}</span>
				</div>
				<div class="order-imgs" v-if="detailData.imageRemarks">
					<product-picture :image-list="[detailData.imageRemarks]"></product-picture>
				</div>
				<div class="base-title" style="margin-top: 48px;"
					v-if="detailData && detailData.storageOrderList && detailData.storageOrderList.length > 0">
					<div class="base-line"></div>
					<div class="title-name">{{ $t('wayBill.extension_btn_text') }}</div>
				</div>
				<div v-if="detailData && detailData.storageOrderList && detailData.storageOrderList.length > 0">
					<Row v-for="(item, index) in detailData.storageOrderList" :key="index">
						<Col :span="8" class="f16">
						<span class="col-666">{{ $t('user.payAmount') }} ：</span>
						<span class="col-333" id="span-copy">￥{{ item.payAmount }}</span>
						</Col>
						<Col :span="8" class="f16">
						<span class="col-666">{{ $t('wayBill.extension_time') }}：</span>
						<span class="col-333">{{ bigTimes(item.quantity, 30) }}{{ $t('user.sky') }}</span>
						</Col>
						<Col :span="8" class="f16">
						<span class="col-666">{{ $t('wayBill.pay_success_time') }} ：</span>
						<span class="col-333">{{ item.createTime }}</span>
						</Col>
					</Row>
				</div>
			</div>
			<div v-if="tabsVal == 'serve'" class="order-base">
				<!-- 用户定制QC -->
				<div class="user-cus-area"
					v-if="(detailData.services && detailData.services.length > 0) || (detailData.videoServices && detailData.videoServices.length > 0)">
					<div class="text-tit" @click="isShowAll = !isShowAll">{{ isShowAll ? $t('custom.hide_text_label') :
						$t('custom.show_text_label') }}
						<Icon :type="isShowAll ? 'ios-arrow-up' : 'ios-arrow-down'" />
					</div>
					<div class="area-sty" v-if="isShowAll">
						<div v-for="(item, index) in detailData.services" :key="item.id" class="list-sty">
							<div class="name-text">{{ $t('custom.pic_text_desc') }}{{ index + 1 }}</div>
							<product-picture v-if="item.imageUrl" :image-list="[item.imageUrl]" class="img-sty"></product-picture>
							<div class="desc-text">{{ item.serviceRemark }}</div>
						</div>
						<div v-for="(item, index) in detailData.videoServicesV1" :key="index" class="list-sty">
							<div class="name-text">{{ $t('custom.vid_text_desc') }}{{ index + 1 }}</div>
							<div class="video-text">{{ comTypeVid(item.videoType) }}</div>
						</div>
					</div>
				</div>
				<!-- 免费质检照片 -->
				<div v-if="detailData.checkPhotos && detailData.checkPhotos.length">
					<!-- <div class="base-title">
						<div class="base-line"></div>
						<div class="title-name">{{ $t('user.entrepot_image') }}</div>
					</div>
					<div class="order-photos">
						<div class="photos-content">
							<div v-for="(item, index) in detailData.checkPhotos" :key="index" class="content-item"
								@click="imgMagnify(index)">
								<img class="photos-img" :src="item" alt="" />
							</div>
						</div>
					</div> -->
					<div class="qc-head">
						<div class="head-line"></div>
						<div class="head-title">{{ $t('user.freePhotos') }}</div>
					</div>
					<div class="qc-list" v-if="userInfo.inviteCode">
						<qc-photos :arr="detailData.checkPhotos" :items="detailData" :inviteCode="userInfo.inviteCode"
							types="qc-detail" @discordJump="discordJump"></qc-photos>
					</div>
				</div>
				<!-- 定制照片 -->
				<div class="qc-head" v-if="detailData.photoServices && detailData.photoServices.length > 0">
					<div class="head-line"></div>
					<div class="head-title">{{ $t('custom.cus_name_pic') }}</div>
				</div>
				<div class="qc-list" v-if="detailData.photoServices && detailData.photoServices.length > 0">
					<cus-pic-list :arr="detailData.photoServices" :items="detailData" :inviteCode="userInfo.inviteCode"
						types="qc-detail" @discordJump="discordJump"></cus-pic-list>
				</div>
				<!-- 定制视频 -->
				<div class="qc-head" v-if="detailData.videoServices && detailData.videoServices.length > 0">
					<div class="head-line"></div>
					<div class="head-title">{{ $t('custom.cus_name_vid') }}</div>
				</div>
				<div class="qc-list" v-if="detailData.videoServices && detailData.videoServices.length > 0">
					<cus-vid-list :arr="detailData.videoServices" :items="detailData" :inviteCode="userInfo.inviteCode"
						types="qc-detail" @discordJump="discordJump"></cus-vid-list>
				</div>
				<t-no-data
					v-if="(!detailData.checkPhotos || detailData.checkPhotos.length == 0) && (!detailData.photoServices || detailData.photoServices.length == 0) && (!detailData.videoServices || detailData.videoServices.length == 0) && (!detailData.services || detailData.services.length == 0) && (!detailData.videoServices || detailData.videoServices.length == 0)"></t-no-data>
			</div>
			<div v-if="tabsVal == 'time'">
				{{ $t('user.order_time_record') }}
			</div>
		</Drawer>
	</div>
</template>

<script>
import TNoData from "@/components/t-no-data";
import OrderStatus from "@/views/main/user/components/order-status";
import ProductPicture from "@/views/main/user/components/product-picture";
import { mapState } from "vuex";
import { bigPlus, bigMinus, bigTimes } from "@/common/digital-computation";
import { getOrderDetailV2 } from "@/api/order";
import qcPhotos from "./qc-photos.vue";
import CusPicList from './cus-pic-list.vue';
import CusVidList from './cus-vid-list.vue';
export default {
	props: ['mainOrderId', 'subOrderId'],
	data() {
		return {
			detailShow: false,
			detailData: {
				skuAttrEnumFormatList: [],
				checkPhotos: []
			},
			orderData: {
				orderItemList: [],
				order: [],
				payOrder: null
			},
			tabsVal: 'base',
			photosShow: false,
			isShowAll: false,
			cardType: [
				{ videoType: 1, isActive: false, title: this.$t('custom.vid_card_tit'), handleText: this.$t('custom.card_rig_text'), content: this.$t('custom.card1_desc'), disabled: false },
				{ videoType: 0, isActive: false, title: this.$t('custom.later_add_more'), handleText: '', content: '', disabled: true }
			]
		}
	},
	components: { ProductPicture, OrderStatus, TNoData, qcPhotos, CusPicList, CusVidList },
	computed: {
		...mapState({
			userInfo: (state) => state.user.userInfo,
			userCurrency: (state) => state.user.userCurrency,
		}),
		hasValidCouponDiscount() {
			const amount = parseFloat(this.detailData.couponDiscountAmount);
			return !isNaN(amount) && amount > 0;
		}
	},
	methods: {
		bigTimes,
		comTypeVid(type) {
			const filteredItem = this.cardType.filter(item => item.videoType === type)[0];
			return filteredItem ? filteredItem.title : undefined;
		},
		discordJump() {
			this.$emit('discordJump')
		},
		open(orderNo, orderItemNo) {
			//详情
			getOrderDetailV2({ orderNo, orderItemNo }).then(res => {
				this.orderData = res.result;
				this.detailData = res.result.orderItemList[0];
				this.detailShow = true;
			})
		},
		copy(val) {
			navigator.clipboard.writeText(val);
			this.$Message.success(this.$t('public.copySuccess'));
		},
		goodsPrice(price, num, transportAmountCn, couponDiscountAmount) {
			let t = bigTimes(price, num);
			let v = bigPlus(t, transportAmountCn);
			return bigMinus(v, couponDiscountAmount);
		},
		close() {
			this.orderData = {
				skuAttrEnumFormatList: []
			};
			this.detailData = {
				orderItemList: [],
				order: [],
				payOrder: null
			};
			this.detailShow = false;
			this.tabsVal = 'base';
		},
		//图片放大
		imgMagnify(index) {
			this.$viewerApi({
				images: this.detailData.checkPhotos,
				options: {
					initialViewIndex: index
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
.detail-drawer-show {
	.order-step {
		width: 95%;
		margin: 0 auto;
		display: block;
		margin-top: 16px;
	}

	.order-imgs {
		margin-top: 20px;
	}

	.copy-input {
		position: fixed;
		top: -10000%;
		right: -10000%;
	}

	.lin-18 {
		line-height: 22px;
	}

	.mt-32 {
		margin-top: 32px;
	}

	.f16 {
		font-size: 16px;
	}

	.col-333 {
		color: #333;
		font-weight: 500;
	}

	.sep-text {
		font-weight: 500;
		font-size: 16px;
		color: #FF186B;
		line-height: 19px;
	}

	.col-666 {
		color: #666;
		font-weight: 400;
	}

	.col-afa {
		color: #AFAFAF;
	}

	.mt-14 {
		margin-top: 14px;
	}

	.order-base {
		padding-top: 24px;

		.user-cus-area {

			.text-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 19px;
				color: #F33184;
				line-height: 22px;
				margin-bottom: 16px;
				cursor: pointer;
			}

			.area-sty {
				padding: 24px 32px;
				background: #F7F9FC;
				border-radius: 8px 8px 8px 8px;

				.list-sty {
					display: flex;
					align-items: center;
					gap: 25px;
					margin-bottom: 20px;

					.name-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 18px;
						color: #1E1714;
						line-height: 21px;
					}

					.img-sty {
						width: 75px;
						height: 75px;
						border-radius: 8px;
						object-fit: cover;
					}

					.desc-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 16px;
						color: #767B93;
						line-height: 19px;
					}

					.video-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 18px;
						color: #000000;
						line-height: 21px;
					}
				}
			}
		}

		.qc-head {
			display: flex;
			align-items: center;

			.head-line {
				width: 3px;
				height: 22px;
				background: #FF186B;
			}

			.head-title {
				margin-left: 8px;
				font-weight: bold;
				color: #1E1714;
				line-height: 22px;
				font-size: 22px;
			}
		}

		.qc-list {
			width: 100%;
			margin-top: 24px;
			background: #F7F9FC;
			border-radius: 8px 8px 8px 8px;
			box-sizing: border-box;
			padding: 20px 32px;
		}

		.order-photos {
			background: #F7F9FC;
			border-radius: 12px;
			margin-top: 20px;
			box-sizing: border-box;
			padding: 0 24px;

			.photos-content {
				overflow-x: auto;
				white-space: nowrap;
				width: 100%;
				padding: 18px 0;
				font-size: 0;

				.content-item {
					width: 120px;
					height: 120px;
					margin-right: 20px;
					display: inline-block;
					font-size: 0;
				}
			}

			.photos-img {
				width: 120px;
				height: 120px;
				border-radius: 12px;
			}
		}

		.no-copy {
			width: 18px;
			height: 18px;
			margin-left: 4px;
			vertical-align: middle;
			cursor: pointer;
		}

		.cause-test {
			background: #FFEEF4;
			padding: 12px 14px;
			font-family: PingFang HK, PingFang HK;
			font-weight: 400;
			font-size: 14px;
			color: #FF186B;
			line-height: 16px;
			margin-bottom: 24px;

		}

		.base-title {
			display: flex;
			align-items: center;
			margin-bottom: 26px;

			.base-line {
				width: 3px;
				height: 21px;
				background: #F33184;
				margin-right: 7px;
			}

			.title-name {
				color: #222;
				font-size: 21px;
				line-height: 21px;
			}
		}
	}

	.order-tabs {
		margin-top: 18px;
	}

	.order-msg {
		background: #F7F9FC;
		border-radius: 12px;
		margin-top: 28px;
		height: 164px;
		box-sizing: border-box;
		padding: 0 26px;
		display: flex;
		align-items: center;
		gap: 14px;

		.order-img {
			width: 120px;
			height: 120px;
			margin-right: 16px;

			.img-imgs {
				width: 120px;
				height: 120px;
				border-radius: 12px;
			}
		}

		.order-right {
			width: calc(100% - 120px - 16px);
			height: 120px;

			.channel-time {
				margin-top: 14px;
				font-size: 16px;
				line-height: 22px;
				color: #666;
			}

			.order-spe {
				margin-top: 18px;
				font-size: 16px;
				line-height: 22px;
				color: #666;
			}

			.title-status {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title-text {
					color: #333;
					font-size: 16px;
					line-height: 22px;
					width: 380px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

			}
		}
	}
}
</style>